<template>
    <div class="">
        <Breadcrumb :route="routes" />
        <div class="wb-container">
            <div class="mian-content">
                <el-table v-loading="loading" element-loading-text="加载数据..." :data="moneyLogList"
                    style="width: 100%;height:100%;margin-bottom: 20px;"
                    :header-cell-style="{ background: '#3CB731', color: '#fff', fontSize: '14px', height: '40px', letterSpacing: '2px' }"
                    size="small" border>
                    <template #empty>
                        <el-empty description="暂无数据！" />
                    </template>
                    <el-table-column prop="admin_user.account" label="商家" align="center" />
                    <el-table-column prop="created_at" label="时间" align="center" />
                    <el-table-column prop="type" label="类型" align="center">
                        <template #default="{ row }">
                            <el-tag v-if="row.type == '1'">增加</el-tag>
                            <el-tag v-else-if="row.type == '2'">减少</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="way" label="增加/减少理由" align="center">
                        <template #default="{ row }">
                            <div class="way-tag">
                                <el-tag round v-if="row.way == '1'">用户购物</el-tag>
                                <el-tag round v-else-if="row.way == '2'" type="info">提现</el-tag>
                                <el-tag round v-else-if="row.way == '3'" type="danger">退款</el-tag>
                                <el-tag round v-else-if="row.way == '4'" type="warning">提现失败</el-tag>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="old_money" label="原有资金" align="center">
                        <template #default="{ row }">
                            <div>￥{{ row.old_money }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="new_money" label="现有资金" align="center">
                        <template #default="{ row }">
                            <div>￥{{ row.new_money }}</div>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="demo-pagination-block">
                    <div style="margin-right: 30px;" v-if="isShowMoney">累计资金：￥<span style="color: red;">{{ money }}</span>
                    </div>
                    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                        :page-sizes="[15, 20, 25, 30]" :small="small" :disabled="disabled" :background="background"
                        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import { useRoute } from "vue-router";
import Breadcrumb from '@/components/nav-header'
import { MoneyLog } from '@/api/finance'
import store from '@/store'
const route = useRoute()
const routes = ref()
const money = ref('')
const isShowMoney = ref(true)
const moneyLogList = ref([])
const loading = ref(true)
//分页
const currentPage = ref(1)
const pageSize = ref(15)
const small = ref(true)
const background = ref(true)
const disabled = ref(false)
const total = ref(0)
//分页查询
const tablePaging = reactive({
    limit: 15,
    page: 1
})

onMounted(() => {
    routes.value = route.matched
    getMoneyLogList()
    let allMoner = JSON.parse(store.state.UserInfo)
    let roleNmae = Object.values(allMoner.role_name)
    if (roleNmae.includes('BOSS')) {
        isShowMoney.value = false
    }
    money.value = allMoner.money
})
//获取资金列表数据
const getMoneyLogList = async () => {
    const result = await MoneyLog(tablePaging).then(res => {
        const { code, data } = res
        loading.value = false
        if (code == 200) {
            moneyLogList.value = data.data
            total.value = data.total
        } else {
            moneyLogList.value = []
        }
    }).catch((err) => {
        loading.value = false
    })
}
const handleSizeChange = (page) => {
    tablePaging.limit = page
    getMoneyLogList()
}
const handleCurrentChange = (current) => {
    tablePaging.page = current
    getMoneyLogList()
}
</script>

<style lang="less" scoped>
.page-content {
    height: 750px;
}

.demo-pagination-block {
    margin-top: 10px;
}

.way-tag {
    margin: 10px;
}
</style>
